<template>
  <div>
    <TodoHeader @add="add"></TodoHeader>
    <TodoMain :list="list" @delall="delall"></TodoMain>
    <TodoFooter :list="list" @del="list=[]"></TodoFooter>
  </div>
</template>
<script>
import TodoFooter from './Todo/TodoFooter.vue';
import TodoHeader from './Todo/TodoHeader.vue';
import TodoMain from './Todo/TodoMain.vue';
export default {
  name: '',
  components: {
    TodoFooter,
    TodoHeader,
    TodoMain
  },
  data () {
    return {
      list: JSON.parse(localStorage.getItem('list')) || [{ id: 1, name: '跑步一万米' },
      { id: 2, name: '游泳一万米' },
      { id: 3, name: '追周亮跑50米' }
      ]
    }
  },
  watch: {
    list (newlist) {
   localStorage.setItem('list',JSON.stringify(newlist))
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    add (obj) {
      this.list.push(obj)
    },
    delall(id){
   const newlist = this.list.filter(ele=>ele.id!=id)
   this.list=newlist
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
